<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML+CSS图片展示升级版</title>
    <link rel="stylesheet" href="./style/index.css">
</head>
<body>
    <div class="con">
        <div class="box">
            <img src="./image/1.jpg" alt="麦当">
            <div class="mask">
                <h1 class="name">麦当</h1>
                <div class="content">
                    <p>单细胞的固执性格，天生强烈的正义感使他总是主动揽下各种不必要的麻烦，重视承诺，重视朋友，热爱美食</p>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="./image/2.jpg" alt="咕咚">
            <div class="mask">
                <h1 class="name">咕咚</h1>
                <div class="content">
                    <p>外表可爱，自大、胆小。他的祖先是勇敢捍卫了亚亚罗星球的国王，是人民心中的英雄，受人民敬仰</p>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="./image/3.jpg" alt="笛亚">
            <div class="mask">
                <h1 class="name">笛亚</h1>
                <div class="content">
                    <p>著名星学家的孙女，星学会唯一的幸存者，守护着银河眼费尽心机寻找的神秘装置——“黄金魔方”</p>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="./image/2.jpg" alt="咕咚">
            <div class="mask">
                <h1 class="name">咕咚</h1>
                <div class="content">
                    <p>外表可爱，自大、胆小。他的祖先是勇敢捍卫了亚亚罗星球的国王，是人民心中的英雄，受人民敬仰</p>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="./image/3.jpg" alt="笛亚">
            <div class="mask">
                <h1 class="name">笛亚</h1>
                <div class="content">
                    <p>著名星学家的孙女，星学会唯一的幸存者，守护着银河眼费尽心机寻找的神秘装置——“黄金魔方”</p>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="./image/1.jpg" alt="麦当">
            <div class="mask">
                <h1 class="name">麦当</h1>
                <div class="content">
                    <p>单细胞的固执性格，天生强烈的正义感使他总是主动揽下各种不必要的麻烦，重视承诺，重视朋友，热爱美食</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>